<!DOCTYPE HTML>
{% load i18n %}
{% load staticfiles %}

{% block global_variables %}{% endblock global_variables %}
<head>
	<title>{% block title %}MoneyGuard - {% trans "Index" %} {% endblock title %}</title>
		
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<meta name="description" content="The Perfect 2 Column Liquid Layout (left menu): No CSS hacks. SEO friendly. iPhone compatible." />
	<meta name="keywords" content="The Perfect 2 Column Liquid Layout (left menu): No CSS hacks. SEO friendly. iPhone compatible." />
	<meta name="robots" content="index, follow" />
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
	
	{% block css_files %}
	<link rel="stylesheet" href="{% static 'css/moneyguard.css' %}" />
	{% endblock css_files %}
	
	{% block css_generic %}
	<link rel="stylesheet" href="{% static 'css/moneyguard.css' %}" />
	{% endblock css_generic %}
	
	{% block css_specific %}
	{% endblock css_specific %}
	
	{% block javascript_generic %}
	<script type="text/javascript" async="" src="{% static 'js/jquery.min.js' %}"></script>
	{% endblock javascript_generic %}
	
	{% block javascript_specific %}
	{% endblock javascript_specific %}
</head>

<body>

<div id="header">
{% block header %}
	{% block userinfo %}
	{% endblock userinfo %}
	{% block titles%}
	<p><a href="" title="Back">&laquo; Back</a> by <a href="">Luciano de Asteinza</a></p>
	<h1>MoneyGuard</h1>
	<h2>Slogan or comment of the page</h2>
	{% endblock titles%}
{% endblock header %}
	<ul>
		{% block menuItems %}
		<li><a href="">Stacked <span>columns</span></a></li>
		<li><a href="">Stacked <span>columns</span></a></li>
		<li><a href="" class="active">Link<span>Active</span></a></li>
		<li><a href="">Stacked <span>columns</span></a></li>
		<li><a href="">&nbsp; <span>columns</span></a></li>
		<li><a href="">Stacked <span>&nbsp;</span></a></li>
		<li><a href="">Stacked <span>columns</span></a></li>
		{% endblock menuItems %}
	</ul>
	<p id="layoutdims">{% block lastHeaderComments %}Links to diferent versions of the same page: <a href="">Green Version</a> | <a href="">Red Version</a> | <strong>Selected Version</strong>{% endblock lastHeaderComments %}</p>

</div>
<div class="colmask leftmenu">
	<div class="colleft">
		<div class="col1">
			<div style="margin: 10px 10px">
				{%block content %}
				<h2>This is an h2</h2>
				<p>This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. </p>
				<h3>This is an h3</h3>
				<p>This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. This is a common p. </p>
				<p>thisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeStringthisIsALargeString</p>
				<dl>
					<dt><strong>some content</strong></dt>
					<dd>nested or not</dd>
					<dd>can have others components</dd>
					<dt><strong>like images</strong></dt>
					<dd>more nested text</dd>
					<dd>this is dd</dd>
				</dl>
				<h2>The nested div structure</h2>
				<div>
					
				</div>
				<p>I've colour coded each div so it's easy to see:</p>
				
				<p>The header, colmask and footer divs are 100% wide and stacked vertically one after the other. Colleft is inside colmask. The two column content divs (col1 &amp; col2) are inside colleft. Notice that the main content column (col1) comes before the side column.</p>
				{% endblock content %}
			</div>
		</div>
		<div class="col2">
			{% block leftbar %}
			<h2>Percentage dimensions of the left menu layout</h2>
			<p>All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content.</p>
			<h3>Maximum column content widths</h3>
			<p>To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. This chops off any content that is wider than the div. Because of this, it's important to know the maximum widths allowable at common screen resolutions. For example, if you choose 800 x 600 pixels as your minimum compatible resolution what is the widest image that can be safely added to each column before it gets chopped off? Here are the figures:</p>
			<dl>
				<dt><strong>800 x 600</strong></dt>
				<dd>Left column: 162 pixels</dd>
				<dd>Main page: 550 pixels</dd>
				<dt><strong>1024 x 768</strong></dt>

				<dd>Left column: 210 pixels</dd>
				<dd>Main page: 709 pixels</dd>
			</dl>
			<h2>The nested div structure</h2>
			<p>I've colour coded each div so it's easy to see:</p>
			<p>The header, colmask and footer divs are 100% wide and stacked vertically one after the other. Colleft is inside colmask. The two column content divs (col1 &amp; col2) are inside colleft. Notice that the main content column (col1) comes before the side column.</p>
			{% endblock leftbar %}
		</div>
	</div>
</div>
<div id="footer">
	{% block footer %}
	<p>This is a Footer and can contain <a href="">Links</a> whas developed by <a href="">Luciano de Asteinza</a>.</p>
	{% endblock footer%}
</div>

</body>
</html>
